import { cn } from "@vercel/geistdocs/utils";
import type { ReactNode } from "react";

interface OneTwoSectionProps {
  children?: ReactNode;
  className?: string;
  description: string;
  title: string;
}

export const OneTwoSection = ({
  className,
  title,
  description,
  children,
}: OneTwoSectionProps) => (
  <div
    className={cn(
      "grid @min-[640px]:grid-cols-3 @min-[640px]:gap-0 gap-12 @min-[640px]:py-12 py-8",
      className
    )}
  >
    <div className="flex flex-col gap-2 text-balance">
      <h2 className="font-[450]! @min-[640px]:text-2xl @min-[768px]:text-3xl text-gray-1000 text-xl tracking-tighter">
        {title}
      </h2>
      <p className="mt-2 text-balance text-gray-900 text-lg">{description}</p>
    </div>
    <div className="@min-[640px]:col-span-2">{children}</div>
  </div>
);